<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>新建采购模板</title>
    <link rel="stylesheet" type="text/css"  href="/elementUI/theme-chalk/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app" >
    <template>
        <el-form :rules="rules"  ref="initiateProject" :model="initiateProject" label-width="100px"  style="width: 600px" >
            <el-form-item label="项目编号" prop="number">
                <el-input v-model="initiateProject.number"></el-input>
            </el-form-item>

            <el-form-item label="项目名称" prop="name">
                <el-input v-model="initiateProject.name"></el-input>
            </el-form-item>

            <el-form-item label="项目负责人">
                <el-input v-model="user.name" disabled></el-input>
            </el-form-item>

            <el-form-item label="项目类别">
                <el-input v-model="initiateProject.projectTypeName" disabled></el-input>
            </el-form-item>
            <el-form-item label="项目时间" required>
                <el-col :span="11">
                    <el-form-item prop="startTime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="initiateProject.startTime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">------</el-col>
                <el-col :span="11">
                    <el-form-item prop="endTime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="initiateProject.endTime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="工作模板" prop="workTemplateId">
                <el-select filterable  v-model="initiateProject.workTemplateId"   placeholder="工作模板">
                    <el-option v-for="item in workTemplates"
                               :label="item.content"
                               :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目成员" prop="members">
                <el-select v-model="initiateProject.members"  value-key="id" multiple allow-create default-first-option placeholder="请选择项目成员">
                    <el-option
                            v-for="item in staffs"
                            :key="item.id"
                            :label="item.name"
                            :value="item">
                        <span style="float: left">{{ item.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.roles[0].name }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="initiateProject.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('initiateProject')">下一步</el-button>
                <el-button onClick="window.history.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </template>
    <!--<template >
        <el-table    :data="workTemplateExecutable"  border style="width: 100%" >
            &lt;!&ndash;            <el-table-column prop="id" ></el-table-column>&ndash;&gt;
            <el-table-column type="index" label="编号" ></el-table-column>
            <el-table-column prop="workTemplateContent.content" label="内容"  ></el-table-column>
            <el-table-column prop="workTemplateContent.roleName" label="角色" ></el-table-column>
            <el-table-column prop="staff.name" label="员工姓名"></el-table-column>
            <el-table-column prop="workTemplateContent.workload" label="层级"></el-table-column>
            <el-table-column prop="workTemplateContent.level" label="工作量"></el-table-column>
            <el-table-column prop="workTemplateContent.time" label="时间"></el-table-column>
            <el-table-column prop="date" label="工作时间"></el-table-column>

        </el-table>
    </template>-->
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementUI/index.js"></script>
<script src="/vue/axios.js"></script>
<script>
    const app =  new Vue({
        el: '#app',
        data: {
            initiateProject:{
                id: '',
                name: '',
                number: '',
                staffId: '',
                projectTypeId:1,
                projectTypeName:'采购',
                workTemplateId: '',
                inputTime: new Date() ,
                startTime: '',
                endTime: '',
                riskAssessment: '',
                enable: 1,
                remark: '',
                state: 1,
                members:[]
            },
            user: {
                name:'',
                id:''
            },
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' },],
                number: [{ required: true, message: '请输入项目编号', trigger: 'blur' },],
                workTemplateId: [{ required: true, message: '请选择工作模板', trigger: 'change' }],
                members: [{   required: true, message: '请选择成员', trigger: 'change' }],
                startTime: [{ type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }],
                endTime: [{ type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }],

            },
            staffs: [],
            workTemplates:[],

        },
        methods: {
            onSubmit(initiateProject) {
                this.$refs.initiateProject.validate((valid) => {
                    if (valid) {
                        axios.post(
                            '/purchase/uploadInitiateProject',
                            this.initiateProject,
                            this.members
                        ).then(res => { if (res.data == 0){
                            this.$message('立项成功');
                            window.location = '/purchase/procurementList';
                        }} )
                    } else {
                        this.$message('立项失败');
                        return false;
                    }
                });


            },
        },
        created(){
            axios.get(
                '/getUser',
            ).then(res => {
                this.user.name = res.data.name;
                this.user.id = res.data.id;
                this.initiateProject.staffId = res.data.id;
            } ),
            axios.get(
                '/work-template/getWorkTemplates2',
            ).then(res => {
                this.workTemplates = res.data;
            } )
            axios.get(
                '/personal/findAllStaff',
            ).then(res => {
                this.staffs = res.data;
            } )
        }
    })
</script>
</html>